<template>
	<view class="page">
		<view class="text">请保存二维码，使用微信扫一扫支付</view>
		<image :src="payImgUrl" class="codeImg"></image>
		<view class="text">也可以复制支付链接，粘贴到微信内打开支付</view>
		<view class="btn" @click="btnActionRecharge()">复制支付链接</view>
	</view>
</template>

<script>
	export default{
		components:{
		},
		data(){
			return{
				payUrl:'',
				payImgUrl:'',
				timer:null
			}
		},
		onLoad(options) {
			let base64 = new this.$base64()
			var p = JSON.parse(base64.decode(options.params))
			this.payUrl = p.payUrl
			this.payImgUrl = p.payImg
		},
		onShow() {
			if(uni.getStorageSync('orderNo')) {
				this.timer = setInterval(()=>{
					this.orderChange(uni.getStorageSync('orderNo'))
				},1500) 
			}
		},
		onHide() {
			clearInterval(this.timer)
		},
		methods:{
			//查询支付结果
			orderChange(orderId){
				this.$api.orderState({orderNo:orderId}).then(res=>{
					if(res.code === '200'){
						clearInterval(this.timer)
						uni.showModal({
							title:"支付通知",
							content:"您已完成支付！请稍后刷新页面查询到账",
							success(ress){
								uni.switchTab({
									url:"/pages/index/index"
								})
							}
						})
					}
				})
			},
			btnActionRecharge(){
				uni.setClipboardData({
				  data:this.payUrl,
				  success: function() {
				    console.log('复制成功');
				  }
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	view{
	    display: flex;
	    flex-grow: 0;
	    flex-basis: auto;
	    align-items: stretch;
	    flex-direction: column;
	}
	.page{
		height:100vh;
		background: #f7f8fa;
	    .text{
	        font-size: 16px;
	        color: #06121e;
	        margin-top: 16px;
	        width: 340px;
	        align-self: center;
			font-weight: bold;
	    }
		.codeImg{
			margin:20upx auto;
			width: 600upx;
			height: 600upx;
		}
	    .btn{
	        width: 200px;
	        height: 47px;
	        border-radius: 94px;
	        font-size: 16px;
	        line-height: 47px;
	        margin-top: 66px;
	        align-self: center;
	        border: 0;
	        background: #3476fe;
	        color: #fff;
	        text-align: center;
	    }
	}
</style>